<template>
    <div class="wrapper">
        <div class="header">
        <div class="logo"></div>
        <nav>
            <ul>
                <router-link to="/MoreGoods/new" active-class="on" tag="li"><a href="#">新品零食</a></router-link>
                <router-link to="/MoreGoods/hot" active-class="on" tag="li"><a href="#">热销零食</a></router-link>
            </ul>
            <router-view></router-view>
        </nav>
        </div>
       
        
    </div>
</template>

<style lang="scss" scoped>
    .wrapper{
        .header{
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .logo{
                margin-left: 20px;
                display: inline-block;
                width: 190px;
                height: 60px;        
                background: url('../images/logo.png');
                background-size: 100% 100%;         
            }
            nav{
                width: 100%;
                height: 50px;
                ul{          
                    list-style: none;
                    display: flex;
                    li{
                        line-height: 50px;
                        width: 50%;
                        text-align: center;
                        a{
                            font-size: 18px;
                            font-weight: 700;
                        }
                    }
                }
            }

        }                         
    }
   .on{     
       a{
           height: 50px;
           color: rgb(252, 144, 144);
       }
   }
</style>